import "./index.scss";
import { View, ScrollView } from "@tarojs/components";
import clsx from "clsx";

const FloatContainer = (props) => {
  const { isOpened, onClose, top, children, bottom } = props;

  const clickMask = () => {
    if (onClose) {
      onClose();
    }
  };

  return (
    <View
      className={clsx(
        "q-float-container",
        isOpened ? "q-float-container-active" : ""
      )}
    >
      <View className="q-float-overlay" onClick={clickMask} />
      <View className="q-float-layout">
        <View className="q-float-body">
          {top}
          <ScrollView scrollY className="q-float-scroll">
            {children}
          </ScrollView>
          {bottom}
        </View>
      </View>
    </View>
  );
};

export default FloatContainer;
